<template>
    <!-- 头信息 -->
    <div class="ms-3">

    </div>

    <!-- 开孔照片// -->
    <div class="m-2" v-if="drillHole.endTime">
        <div class="mt-2 ">
            <div v-for="(item, index) in ewDrillholeInfos" :key="item.id">
                <li class="text-danger fs-7" v-show="item.type == 2 || item.type == 3">
                    {{ item.info }}
                </li>
                <li class="text-dark fs-7" v-show="item.type == 6">
                    {{ item.info }}
                </li>
            </div>

        </div>
        <!-- <div class="m-2" > -->
        <div class="w-100">
            <span class="fs-7 text-black-75"> 终孔深度(m):{{ drillHole.endDepth }} </span>
        </div>
        <div class="w-100">
            <span class="fs-7 text-black-75">
                <span>终孔深度偏离值(m):</span>
                {{ calc(drillHole.designDepth, drillHole.endDepth) }}
            </span>
        </div>
        <div class="w-100">
            <span class="fs-7 text-black-75"> 终孔深度偏离原因：{{ drillHole.f3 }} </span>
        </div>
        <div class="w-100">
            <span class="fs-7 text-black-75"> 位置偏离(m):{{ drillHole.endExcursion }} </span>
        </div>
        <div class="w-100">
            <span class="fs-7 text-black-75"> 位置偏离原因:{{ drillHole.endExcursionDescription }} </span>
        </div>

        <div class="w-100">
            <span class="fs-7 text-black-75"> 终孔描述:{{ drillHole.endDescription }} </span>
        </div>
        <!-- <div class="w-100">
            <span class="fs-7 text-black-75"> <i class="bi bi-alarm"></i> {{ depthExcuision }} </span>
        </div> -->
        <div class="w-100">
            <!-- <span class="fs-7 text-black-75"> <i class="bi bi-alarm"></i> {{ drillHole.endTime }} </span> -->
        </div>
        <div class="w-100">
            <span class="fs-65"> <i class="text-primary bi bi-circle-fill"></i> 终孔记录</span>
        </div>
        <div class="w-100">
            <span class="fs-7 text-black-75"> <i class="bi bi-alarm"></i> {{ drillHole.endTime }} </span>
        </div>

        <div v-if="srcList.length != 0">
            <div class="w-100">
                <span class="fs-65"> <i class="text-primary bi bi-circle-fill"></i> 孔位照片 </span>
            </div>
            <div class="w-100" style="display: flex; flex-direction: row;">
                <!-- //暂时隐藏 -->
                <!-- <el-image v-for="(item, index) in srcList" @click="currentIndex = index" :preview-src-list="srcList"
                    :initial-index="currentIndex" class="m-2" style="width: 90px; height: 60px" :src="item" :zoom-rate="1.2"
                    fit="cover" /> -->

                <div v-for="(item, index) in srcList" class="m-2" style="width: 90px; height: 60px" :src="item">
                    <uk-image @click="currentIndex = index" :src="item" :preview-src-list="srcList"
                        :initial-index="currentIndex" :zoom-rate="1.2" fit="cover">

                    </uk-image>
                </div>
            </div>
        </div>

        <div v-if="videoList.length != 0">
            <div class="w-100">
                <span class="fs-65"> <i class="text-primary bi bi-circle-fill"></i> 孔位视频 </span>
            </div>
            <div class="w-100">
                <div v-for="(item, index) in videoList">
                    <!-- <video v-eles class="image-div" style="width: 140px; height: 100px" :src="item"
                        @click="openVide(item)"></video> -->

                    <div v-eles class="image-div" style="width: 140px;  height: 100px;margin-left: 10px;"
                        v-for="(item, index) in videoList">

                        <uk-video :src="item" @clickVideo="openVide(item)"></uk-video>

                        <!-- <video   ></video> -->
                    </div>
                </div>
            </div>
        </div>
        <div class="w-100" v-if="drillHole.type !== '静力触探孔'">
            <span class="fs-65"> <i class="text-primary bi bi-circle-fill"></i> 钻孔资料 </span>
            <div class="mt-2">
                <el-button type="primary" @click="getBoreholeHistogram()">查看钻孔柱状图</el-button>
                <el-button type="primary" @click="getWholeHoleCore()">查看岩芯柱状图</el-button>
                <!-- <el-button type="primary" @click="" link>查看土层参数</el-button> -->
            </div>


        </div>

        <el-dialog v-model="videoDialogVisible" title="视频详情" width="600" :append-to-body="true" style="border-radius: 10px"
            center destroy-on-close>
            <div class="w-100 d-flex justify-content-center">
                <iframe width="500" height="500" :src="currentVideoSrc"></iframe>

            </div>

            <template #footer>
                <span>
                    <el-button type="primary" @click="videoDialogVisible = false">关闭</el-button>
                </span>
            </template>
        </el-dialog>


        <el-dialog v-model="wholeHoleCoreVisible" width="800" destroy-on-close>
            <div class="w-100">
                <span class="fs-65"> <i class="text-primary bi bi-circle-fill"></i> 岩芯照片</span>


                <div v-for="(item, index) in wholeHoleCoreImageList" class="m-2" style="width: 90px; height: 60px"
                    :src="item">
                    <uk-image @click="currentIndex = index" :src="item" :preview-src-list="wholeHoleCoreImageList"
                        :initial-index="currentIndex" :zoom-rate="1.2" fit="cover">

                    </uk-image>
                </div>
                <div class="w-100" style="display: flex; flex-direction: row;">
                    <!-- //暂时隐藏 -->


                </div>


            </div>
            <span class="fs-65"> <i class="text-primary bi bi-circle-fill"></i> 整孔岩芯柱状图</span>
            <div style="height: 600px;" class="wholeCoreImge">

                <div class="w-50">
                    <img @load="loadImage" style="width: 30%; margin-left: 70%" :src="wholeCoreCuturl" />

                </div>
                <div class="w-50">
                    <div style="width: 40%;border:1px solid #000 " :style="{ height: height + 'px' }">
                        <div style="padding-left: 10px;width:100%;border-bottom:1px solid #000"
                            v-for="(item, index) in drillStratumList" :style="{
                                    marginTop: (((item.bottomDepth / tatolDepth) * height) - 22.2) + 'px'
                                }"> <span class="text-dark fs-7">{{ item.name }}({{ item.bottomDepth }}米) </span></div>
                    </div>
                </div>

            </div>

        </el-dialog>


        <el-dialog v-model="dialogVisibleForPdf" width="80%">
            <iframe :src="pdfUrl" frameborder="0" style="width: 100%; height: 70vh"></iframe>

            <!-- <div style="width: 100%; height: 70vh">
            <vue-pdf-embed ref='pdf' :source="state.source"  style="width: 100%; height: 70vh" :page="state.pageNum" class="vue-pdf-embed" />
        </div> -->

            <!-- <pdf :src="pdfUrl"   :show-toolbar="true"></pdf> -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleForPdf = false">关闭</el-button>
            </span>
        </el-dialog>

    </div>
    <div class="m-2" v-if="WholeDrillHole.length > 0">
        <span class="fs-65"> <i class="text-primary bi bi-circle-fill"></i> 整孔岩芯 </span>
        <div class="w-100">

        </div>
        <div v-for="(item, index) in WholeDrillHole">
            <div class="m-1">
                <div class="mt-2 mb-4 w-100 rounded d-flex justify-content-center align-items-start flex-column"
                    style="background-color: #e8edff; height: ;">
                    <!-- <div class=" ms-4 mt-4 fs-65 text-black-75"> 测量偏离距离: {{ drillHole.type }} </div> -->
                    <div class=" ms-4 mt-2 fs-65 text-black-75"> 开始深度(m): {{ item.startDepth }}</div>
                    <div class=" ms-4 mt-1 fs-65 text-black-75"> 结束深度(m): {{ item.endDepth }}</div>
                    <div class="  ms-4  mt-1 mb-4 fs-65 text-black-75"> 描述: {{ item.description }}</div>
                    <div class=" ms-4  mt-1 mb-4">
                        <!-- //暂时隐藏 -->
                        <el-image v-for="(itemImg, index) in dealImage(item.images)" @click="currentIndex = index"
                            :preview-src-list="dealImage(item.images)" :initial-index="currentIndex" class="m-2"
                            style="width: 90px; height: 60px" :src="itemImg" :zoom-rate="1.2" fit="cover" />
                    </div>
                </div>
            </div>
            <!-- <div class="m-2" >
        <div class="w-100">
            <span class="fs-65"> <i class="text-primary bi bi-circle-fill"></i> 岩芯照片 </span>
        </div>
        <div class="w-100">
        </div>

    
   
    </div> -->

        </div>
    </div>
    <!-- 基本信息 -->
</template>
    
<script setup lang='ts'>

import ukVideo from '@/components/common/uk-video/uk-video.vue';
import ukImage from '@/components/common/uk-image/uk-image.vue';
import { ElDialog, ElMessage } from 'element-plus';
import { useRvo } from '@/hook/useRvo';
import API from '@/network/api';
import _ from 'lodash';
import { useStore } from "vuex";

export interface WholeCore {
    startDepth?: number
    endDepth?: number
    description?: any
    images?: any
}

export interface BoreVo {
    id?: string
    code?: string
    type?: string
    coordinateDesignX?: number
    coordinateDesignY?: number
    measureDepth?: number
    measureWaterDepth?: number
    coordinateMeasureX?: number
    coordinateMeasureY?: number
    newDrillHoleReason?: string
    openCoordinateX?: number
    openCoordinateY?: number
    openImage?: string
    locationType?: string
    landType?: string
    boreProperty?: string
    designDepth?: number
    designRequirements?: string
    designExcursionDepth?: number
    designExcursionDistance?: number
    openTime?: string
    openVideo?: string
    openExcursion?: number
    openDescription?: string
    endCoordinateX?: number
    endCoordinateY?: number
    endTime?: string
    endImage?: string
    endBoringImage?: string
    endVideo?: string
    endExcursion?: number
    endExcursionDescription?: string
    endDepth?: number
    endDescription?: string
    description?: string
    image?: string
    altitude?: number
    waterAltitude?: number
    projectId?: string
    depth?: number
    createTime?: string
    updateTime?: string
    groupId?: string
    epsg?: string
    f3?: string
    isStaticSounding?: string
    landId?: string
    status?: string
    recipientId?: string
    drillRigId?: string
    drillRigCode?: string
    drillRigCaptain?: string

}
let videoDialogVisible = ref(false)

let wholeHoleCoreVisible = ref(false)
const calc = (num1: any, num2: any) => {
    return Math.abs(num1 - num2).toFixed(2);
}
const loadImage = (event: any) => {
    console.log(event.target.clientHeight);

    height.value = event.target.clientHeight;
}
const store = useStore();

// const store = useStore();
const drillHole = ref({} as BoreVo)
const WholeDrillHole = ref([] as any)
const depthExcuision = ref()
const baseUrl = store.getters['getOssAliuncs']
const url = ref("")
const srcList = ref([])
const srcImageList = ref([])
const videoList = ref([])
let currentVideoSrc = ref("")
let currentIndex = ref(0)
const props = defineProps({
    drillHoleId: {
        type: String,
        default: ""
    }

})

const dealImage = (str: any) => {
    console.log(str, 'ssssssss');
    let srcImageList = []
    if (str) {
        let images = JSON.parse(str)
        if (images.lenth != 0) {
            for (let index = 0; index < images.length; index++) {
                let item = images[index]
                if (index == 0) {
                    url.value = baseUrl + item
                }
                if (getFileExtension(item) === "mp4") {
                    (videoList.value as any).push(baseUrl + item)
                } else {
                    srcImageList.push(baseUrl + item)
                }
            }
        }
    }
    return srcImageList
}




const openVide = (item: string) => {
    videoDialogVisible.value = true;
    currentVideoSrc.value = item
}


const ewDrillholeInfos: any = ref([])
onMounted(async () => {

    let idRvo = useRvo().idRvo;
    idRvo.id = props.drillHoleId;

    let res = await API.drillHole.info(idRvo);
    drillHole.value = res.singleData
    ewDrillholeInfos.value = res.data.ewDrillholeInfos
    let resCore = await API.wholeHoleCore.list(idRvo)
    if (resCore.singleData.length > 0) {
        WholeDrillHole.value = resCore.singleData
        // if (resCore.singleData.length > 0) {
        //     WholeDrillHole.value = resCore.singleData[0]
        //     if (WholeDrillHole.value.images) {
        //         let images = JSON.parse(WholeDrillHole.value.images)
        //         if (images.lenth != 0) {
        //             for (let index = 0; index < images.length; index++) {
        //                 let item = images[index]
        //                 if (index == 0) {
        //                     url.value = baseUrl + item
        //                 }

        //                 if (getFileExtension(item) === "mp4") {
        //                     (videoList.value as any).push(baseUrl + item)
        //                 } else {
        //                     (srcImageList.value as any).push(baseUrl + item)
        //                 }
        //             }
        //         }
        //     }
        // } else {

    }
    console.log(WholeDrillHole.value, ' WholeDrillHole.value');

    if (drillHole.value.endDepth != undefined && drillHole.value.designDepth != undefined) {
        depthExcuision.value = drillHole.value.endDepth - drillHole.value.designDepth

    }
    if (drillHole.value.endVideo) {
        let images = JSON.parse(drillHole.value.endVideo)
        if (images.lenth != 0) {
            for (let index = 0; index < images.length; index++) {
                let item = images[index]
                if (index == 0) {
                    url.value = baseUrl + item
                }

                if (getFileExtension(item) === "mp4") {
                    (videoList.value as any).push(baseUrl + item)
                } else {
                    (srcList.value as any).push(baseUrl + item)
                }


            }
        }
    }

    if (drillHole.value.endBoringImage) {

        let images = JSON.parse(drillHole.value.endBoringImage)
        if (images.lenth != 0) {
            for (let index = 0; index < images.length; index++) {
                let item = images[index]
                if (index == 0) {
                    url.value = baseUrl + item
                }

                if (getFileExtension(item) === "mp4") {
                    (videoList.value as any).push(baseUrl + item)
                } else {
                    (srcList.value as any).push(baseUrl + item)
                }


            }
        }

    }

    if (drillHole.value.endImage) {

        let images = JSON.parse(drillHole.value.endImage)
        if (images.lenth != 0) {
            for (let index = 0; index < images.length; index++) {
                let item = images[index]
                if (index == 0) {
                    url.value = baseUrl + item
                }

                if (getFileExtension(item) === "mp4") {
                    (videoList.value as any).push(baseUrl + item)
                } else {
                    (srcList.value as any).push(baseUrl + item)
                }


            }
        }

    }


    console.log(srcList.value);
    console.log(videoList.value);



})
const getFileExtension = (filename: String) => {
    return filename.split('.').pop();
}


let pdfUrl = ref("");
let dialogVisibleForPdf = ref(false)
const getBoreholeHistogram = async () => {

    let res = await API.boreLog.generateBoreLog({
        ids: [props.drillHoleId],
        projectName: "test"
    })
    console.log(res);
    if (!res.data.pdfPathId || res.data.pdfPathId.indexOf(".pdf") == -1) {
        ElMessage.info(res.data.pdfPathId)
    } else {
        dialogVisibleForPdf.value = true;
        pdfUrl.value = store.getters['getOssUrlPrefix'] + res.data.pdfPathId
    }





}




const myIamge = ref(null);
const height = ref(0)
const wholeHoleCoreImageList = ref([])
let currentwholeHoleCoreImageSrc = ref(0)
const wholeHoleCoreList = ref([])
const wholeCoreCuturl = ref("")
const drillStratumList: any = ref([]);

let tatolDepth = ref(0)
const getWholeHoleCore = async () => {
    tatolDepth.value = 0
    let resStratum = await API.drillStratum.list({
        id: props.drillHoleId,
        pageNumber: 1,
        pageSize: 9999
    })
    drillStratumList.value = resStratum.data.list
    // drillStratumList.value.forEach((element: any) => {
    //     tatolDepth.value += element.bottomDepth
    // });
    if (drillStratumList.value.length > 0) {
        tatolDepth.value = drillStratumList.value[drillStratumList.value.length - 1].bottomDepth
    }

    wholeHoleCoreImageList.value = []
    wholeHoleCoreVisible.value = true
    let res = await API.wholeHoleCore.list({ id: props.drillHoleId })
    wholeHoleCoreList.value = res.singleData

    wholeHoleCoreList.value.forEach((item: any) => {
        let images = JSON.parse(item.images)
        if (images.lenth != 0) {
            for (let index = 0; index < images.length; index++) {

                (wholeHoleCoreImageList.value as any).push(baseUrl + images[index])

            }
        }

        if (item.targetUrl) {
            wholeCoreCuturl.value = baseUrl + 'image/' + item.targetUrl
        }

    })


}

</script>
    
<style scoped lang="scss">
.wholeCoreImge {
    display: flex;
    flex-direction: row;
    overflow-y: auto;
    align-items: stretch;

    .iamge {

        justify-content: center;
        display: flex;
        flex-direction: row;
    }
}
</style>